<!--
* @description 参数1
* @fileName 05.计算属性
* @author userName
* @date 2024-01-23 11:00:41
* @version V1.0.0
!-->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>05.计算属性</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
</head>

<body>
    <div id="app">
        姓 <input type="text" v-model="firstName"> + 名
        <input type="text" v-model="lastName"> = 姓名 {{fullName}}
        <hr>
        姓 <input type="text" v-model="firstName"> + 名
        <input type="text" v-model="lastName"> = 姓名
        <input type="text" v-model.lazy="fullName02">
    </div>

    <script>
        /**
         * data 就是一个状态数据
         * 计算属性:  计算data中状态的属性 【自动计算  如果data一旦发生改变  那么计算属性也会发生变化】
         *  特点： 初始化就会执行
         *         只读属性
         */
        var vm = new Vue({
            data: {
                firstName: "小",
                lastName: "名"
            },
            computed: {
                // 计算属性简单写法   就是一个函数  返回值就是计算结果
                fullName() {
                    const {
                        firstName,
                        lastName
                    } = this;
                    return firstName + lastName
                },
                fullName02: {
                    // value 计算属性传来的值
                    set(value) {
                        // console.log(value);
                        this.firstName = value.substr(0,1)
                        this.lastName = value.substr(1)

                    },
                    get() {
                        const {
                            firstName,
                            lastName
                        } = this;

                        return firstName + lastName
                    }
                }
            }
        });
        vm.$mount("#app")
    </script>
</body>

</html>